<!--
 * @Author: Qinyonglian
 * @Date: 2019-08-26 18:15:01
 * @LastEditors: Shuangshuang Song
 * @LastEditTime: 2020-08-11 16:41:00
 -->
<!-- 冒泡详情 -->
<style rel="stylesheet/scss" lang="scss" >
.pro-crm-home-bubble-info {
  .bubble-info {
    width: 1250px;
    height: 100%;
    margin: 0 auto;
    overflow: auto;
    position: relative;
    .el-card__header {
      font-size: 18px;
      font-weight: bold;
    }
    .el-col {
      .el-card {
        min-height: 840px;
      }
    }
    .comment-box {
      padding: 0 10px 30px 10px;
      color: #333333;

      .el-textarea {
        margin: 20px 0;
      }
      .comment-box-title {
        font-size: 16px;
      }
      .comment-box-bottom {
        .emoji,
        .image {
          color: darkgray;
          cursor: pointer;
          margin-right: 10px;
        }

        .selectImages {
          padding: 0 4px;
          .remove {
            cursor: pointer;
            padding: 0 5px;
            font-size: 14px;
            color: #d24e58;
          }
        }
        .button-box {
          float: right;
          .el-button {
            width: 100px;
            margin-left: 20px;
            background-color: #2f6bcf;
            border: 0;
          }
        }
      }
    }
  }

  .el-dialog.is-fullscreen {
    background-color: #f0f2f5;
    .el-dialog__header {
      display: none;
    }
    .el-dialog__close {
      position: absolute;
      right: 20px;
      top: 20px;
      font-size: 20px;
      cursor: pointer;
    }
    .el-dialog__close:hover {
      color: #2f6bcf;
    }
  }
}
</style>
<template>
  <div class="pro-crm-home-bubble-info">
    <el-dialog
      :visible.sync="visible"
      top="0"
      custom-class="info-dialog"
      fullscreen
    >
      <div class="bubble-info">
        <el-row
          :gutter="20"
          style="margin-right:0"
        >
          <el-col :span="18">
            <el-card class="box-card">
              <div slot="header">
                {{ $t('_bubble.maopaoxiangqing') }}
              </div>
              <div class="info-content">
                <div style="padding:10px">
                  <bubble-listitem
                    :item="item"
                    :index="index"
                    :dozaner="dozaner"
                    @doComment="focusInput"
                    @doZan="doZan"
                    @doRemove="doRemove"
                    type="info"
                  />
                </div>
                <div class="comment-box">
                  <div class="comment-box-title">
                    {{ $t('_bubble.comment') }}
                  </div>
                  <el-input
                    ref="messageInput"
                    v-model="message"
                    :rows="4"
                    :placeholder="$t('_bubble.somethingsay')"
                    clearable
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                  />
                  <div class="comment-box-bottom">
                    <span
                      ref="emojiBtn"
                      @click.stop.prevent="showEmoji"
                      class="emoji"
                    >
                      <i class="jeicon jeicon-smile" /> {{ $t('_bubble.xuanzebiaoqing') }}
                    </span>
                    <je-emoji-popover
                      :visible="visibleEmojiInfo"
                      :trigger-el="triggerEl"
                      @select="selectEmoji"
                    />

                    <span
                      @click.stop.prevent="selectImage"
                      class="image"
                    >
                      <i class="jeicon jeicon-image-o" /> {{ $t('_bubble.xuanzetupian') }}
                    </span>
                    <span
                      v-for="(file, ind) in selectImages"
                      :key="ind"
                      class="selectImages"
                    >
                      {{ file.name }} <span
                        @click="removeImage(file, ind)"
                        class="remove"
                      >x</span>
                    </span>
                    <div class="button-box">
                      <span class="num">{{ messageLength }}/500</span>
                      <el-button
                        @click.stop.prevent="doComment"
                        type="primary"
                        size="medium"
                      >
                        {{ $t('_bubble.comment') }}
                      </el-button>
                    </div>
                  </div>
                </div>
                <div
                  v-loading="loading"
                  class="comment-list"
                >
                  <bubble-listitem
                    v-for="(com, ind) of comments"
                    :key="ind"
                    :item="com"
                    :index="ind"
                    @doReplyComment="doReplyComment"
                    @doRemove="removeComment"
                    type="comment"
                  />
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="box-card">
              <div slot="header">
                {{ $t('_bubble.remenmaopao') }}
              </div>
              <bubble-list
                ref="list"
                :page-size="12"
                @doComment="refreshComment"
                type="hot"
                autoload
              />
            </el-card>
          </el-col>
        </el-row>
        <i
          @click.stop.prevent="closeDz"
          class="el-dialog__close el-icon el-icon-close"
        />
      </div>
    </el-dialog>
  </div>
</template>
<script>
import BubbleList from './bubble_list.vue';
import BubbleListitem from './bubble_listitem.vue';
import JEEmojiPopover from '../../../../components/emoji/index.vue';

export default {
  name: 'BubbleInfo',
  components: { BubbleList, BubbleListitem, 'je-emoji-popover': JEEmojiPopover },
  props: ['item', 'index'],
  data() {
    return {
      visible: false,
      replyComment: null,
      loading: false,
      message: '',
      selectImages: [],
      comments: [],
      dozaner: [],
      visibleEmojiInfo: false,
      triggerEl: '',
    };
  },
  computed: {
    messageLength() {
      return this.message.length;
    },
  },
  mounted() {
    const me = this;
    me.$nextTick(() => {
      Ext.get(me.$el.querySelector('.info-dialog')).on('scroll', () => {
        me.visibleEmojiInfo = false; // emoji 表情弹框隐藏
      });

      Ext.get(me.$el.querySelector('.info-dialog')).on('click', () => {
        me.visibleEmojiInfo = false; // emoji 表情弹框隐藏
      });
    });
  },
  methods: {
    showEmoji() {
      this.visibleEmojiInfo = !this.visibleEmojiInfo;
      this.triggerEl = this.$refs.emojiBtn;
    },
    show() {
      const me = this;
      me.visible = true;
      me.resetComment();
      me.$nextTick(() => {
        me.loadComments();
        me.$refs.list.loadPage();
      });
    },

    /**
     * 重置评论信息
     */
    resetComment() {
      this.message = '';
      this.replyComment = null;
      this.selectImages = [];
    },
    /**
     * 获得焦点
     */
    focusInput() {
      this.$refs.messageInput.focus();
      this.resetComment();
    },
    /**
     * 选择表情
     */
    selectEmoji(emoji) {
      this.message += emoji;
    },
    /**
     * 选择图片
     */
    selectImage() {
      const me = this;
      JE.uploadFile({
        fileTypes: 'jpg;png;gif;jpeg',
        // params: {
        //   returnType: 'all',
        //   jeFileType: 'PROJECT',
        // },
        uploadFileType: 'func',
        post_params: { uploadType: 'OTHER' },
        callback(file) {
          // delete file.docInfo;
          // delete file.size;
          me.selectImages = [file];
        },
      });
    },
    /**
     * 删除图片
     */
    removeImage(file, index) {
      this.selectImages.splice(index, 1);
    },
    /**
     * 刷新当前评论
     */
    refreshComment(item, index) {
      this.item = item;
      this.index = index;
      this.resetComment();
      this.loadComments();
    },

    /**
     * 删除评论
     */
    removeComment(item, index) {
      const me = this;
      JE.confirm(`${me.$t('suredelete')}?`, (btn) => {
        if (btn == 'ok') {
          me.comments.splice(index, 1);
          JE.msg(`${me.$t('alert.seletesuccessfully')}!`);
          JE.ajax({ url: '/je/portal/homePortal/removeComment', async: true, params: { ids: item.JE_CIRCLE_COMMENT_ID, tableCode: 'JE_CIRCLE_COMMENT' } });
          me.item.MPXX_PLL--;
        }
      });
    },
    doRemove(item) {
      const me = this;
      JE.confirm(`${me.$t('suredelete')}?`, (btn) => {
        if (btn == 'ok') {
          JE.msg(`${me.$t('alert.seletesuccessfully')}!`);
          JE.ajax({ url: '/je/portal/homePortal/removeBubble', async: true, params: { ids: item.JE_CIRCLE_MPXX_ID, tableCode: 'JE_CIRCLE_MPXX' } });
          me.visible = false;
        }
      });
    },
    /**
     * 评论
     */
    doComment() {
      this.visibleEmojiInfo = false;
      const type = this.replyComment == null ? 'comment' : 'reply';
      const params = {
        userId: this.item.MPXX_FSRZJ,
        userName: this.item.MPXX_FSRNC,
        MPXX_XXNR: this.item.MPXX_XXNR,
        COMMENT_YW_ID: this.item.JE_CIRCLE_MPXX_ID,
        COMMENT_YW_CODE: 'bubble',
        COMMENT_YW_NAME: '冒泡',
        COMMENT_LX: type,
        COMMENT_PLNR: this.message || '',
        COMMENT_PLTP: Ext.encode(this.selectImages),
      };
      if (type == 'reply') {
        params.userId = this.replyComment.SY_CREATEUSERID;
        params.userName = this.replyComment.SY_CREATEUSERNAME;
        params.COMMENT_FJPL_ID = this.replyComment.JE_CIRCLE_COMMENT_ID;
        params.COMMENT_PLNR = params.COMMENT_PLNR.replaceAll(`@${params.userName}`, '');
      }

      if (!params.COMMENT_PLNR.trim()) {
        return JE.msg(`${this.$t('alert.contentcantempty')}~`);
      }
      if (params.COMMENT_PLNR.length > 500) {
        return JE.msg(`${this.$t('alert.alert5')}~`);
      }
      const obj = JE.ajax({
        url: '/je/portal/homePortal/doComment',
        params,
      });
      if (obj.success) {
        JE.msg(`${this.$t('alert.commentssuccessfully')}~`);
        this.comments.unshift(obj.obj);
        if (type == 'comment') {
          this.item.MPXX_PLL++;
        }
      } else {
        JE.msg(`${this.$t('alert.commentsfail')}~`);
      }
      this.resetComment();
    },
    /**
     * 回复
     */
    doReplyComment(item) {
      this.message = `@${item.SY_CREATEUSERNAME} `;
      this.replyComment = item;
      this.$refs.messageInput.focus();
    },
    /**
     * 加载评论
     */
    loadComments() {
      const me = this;
      me.loading = true;
      JE.ajax({
        url: '/je/portal/homePortal/findBubbleInfo',
        params: { id: this.item.JE_CIRCLE_MPXX_ID },
        async: true,
        success(response) {
          const data = JE.getAjaxData(response);
          if (data.success) {
            me.comments = data.obj.PL;
            me.dozaner = data.obj.DZRID;
          }
          me.loading = false;
        },
      });
    },
    closeDz() {
      const me = this;
      me.visible = false;
      me.$emit('buildData', '');
    },
  },
};
</script>
